{{! corresponding files: login.php & login.json }}

<script type="text/javascript">
$(document.body).addClass('login');
</script>

<div class="login-content">
<div class="pure-u-1 pure-u-md-1-3 login-panel-container">
	<div class="inner">
<h3 id="message" {{#login_error}} class="error"{{/login_error}}>{{login_message}}</h3>
	<form method="post" id="cash_signin_form" action="{{www_path}}/">

		<div class="pure-u-1">
			<label for="address">{{label_email}}</label>
			<input type="email" name="address" value="" />
		</div><!--pure-->
		<div class="pure-u-1">
			<label for="password">{{label_password}}</label>
			<input type="password" name="password" value="" />
			<input type="hidden" name="login" value="1" />
		</div><!--pure-->
		<div class="pure-u-1">
			<input type="submit" class="button" value="Log in" />
		</div><!--pure-->

		<div class="pure-u-1">
			<a href="{{www_path}}/resetpassword/" id="forgotlink" class="lightboxed">{{copy_forgot_pass}}</a>
		</div><!--pure-->
		{{#allow_signups}}
<div class="signup">
	<div class="pure-u-1">
		<p>{{copy_no_account}}<a href="{{www_path}}/signup/" id="signupbtn" class="lightboxed">{{copy_sign_up}}</a>{{copy_its_free}}</p>
	</div><!--pure-->
</div><!--signup-->
{{/allow_signups}}
	</form>
</div><!--inner-->
</div><!--pure-->

<div class="pure-u-1 pure-u-md-1-3 login-social-container">
	<div class="inner login-social-feature">
		<a href="http://about.cashmusic.org/" target="_blank">
		<h4>{{copy_learn_about_title}}</h4>
		<p>{{copy_learn_about_body}}</p>
	</a>
	</div><!--inner-->
	<div class="inner login-social-feature">
		<a href="https://cashmusic-slack.herokuapp.com/" target="_blank">
		<p>{{copy_community_body}}</p>
		<img src="/admin/ui/default/assets/images/slack.png" alt="Slack"/>
		</a>
	</div><!--inner-->
</div><!--pure-->

<div class="pure-u-1 pure-u-md-1-3 login-carousel-container">
	<div class="inner login-carousel-feature">
		<div class="panel" id="cc">
			<div class="browser-header"><span></span><span></span><span></span></div><!--brower-header-->
			<img id="ccimg" src="{{www_path}}/ui/default/assets/images/rtj_example.jpg" width="100%" alt="" />
			<h4 id="ccheader">{{{copy_feature_header1}}}</h4>
			<p id="ccfeature">{{copy_feature_body1}}</p>
		</div><!--panel-->
		<div class="carousel-controller"><span id="cc0"></span><span id="cc1" class="current"></span><span id="cc2"></span></div><!-- carousel-controls -->
	</div><!--pure-->
</div><!--pure-->

<script type="text/javascript">
	$('#cash_signin_form').on('submit', function(e) {
		$('#loadingmask').css('width','101%');
	});

	if ($('#message.error').css('display') == 'block') {
		$('#loadingmask').css('width','1%');
	}

	localStorage.setItem('resetadminforms',true);

	history.pushState(null, null, '{{www_path}}/');

	window.setInterval(carousel, 12000);
	var cc = 1;
	var ccskip = false;
	function carousel() {
		if (ccskip) {
			ccskip = false;
		} else {
			var c = $('#cc');
			var images = [
				'{{www_path}}/ui/default/assets/images/af_example.jpg',
				'{{www_path}}/ui/default/assets/images/rtj_example.jpg',
				'{{www_path}}/ui/default/assets/images/bk_example.jpg'
			];
			var headers = [
				"{{{copy_feature_header0}}}",
				"{{{copy_feature_header1}}}",
				"{{{copy_feature_header2}}}"
			];
			var features = [
				"{{copy_feature_body0}}",
				"{{copy_feature_body1}}",
				"{{copy_feature_body2}}"
			];
			if (cc == 2) {
				cc = 0;
			} else {
				cc++;
			}
			var next = $('#cc'+cc);
			$('div.carousel-controller span').removeClass('current');
			$(next).toggleClass('current');

			c.fadeOut(function() {
				$('#ccimg').attr('src',images[cc]);
				$('#ccheader').text(headers[cc]);
				$('#ccfeature').text(features[cc]);
				c.fadeIn();
			});
		}
	}

	$('#cc0').click(function() {
		ccskip = false;
		cc = 2;
		carousel();
		ccskip = true;
	});
	$('#cc1').click(function() {
		ccskip = false;
		cc = 0;
		carousel();
		ccskip = true;
	});
	$('#cc2').click(function() {
		ccskip = false;
		cc = 1;
		carousel();
		ccskip = true;
	});
</script>

{{#open_signup_panel}}
	<script type="text/javascript">
		$(this).data('timeout', setTimeout($.proxy(function(){ $('#signupbtn').trigger('click'); }, this), 750));
	</script>
{{/open_signup_panel}}
</div><!--content-->
